import React, { Component } from 'react'

import { Row, Col, Icon } from 'antd';

import ListCard from '@/components/ListCard';
import Step from '@/components/Step';
import Imgviewer from '@/components/ImgViewer';
import DividerItem from '@/components/DividerItem';
import { ListCardItem } from '@/components/ListCard/styled';

import { DETAILS_RIST_2, DETAILS_RIST_3, DETAILS_RIST_4, DETAILS_RIST_8, getColor } from './enum';

interface IDetails {
  level: Array<string>;
}

interface P {
  data: IDetails
}

const sliceTime = (time) => (time ? time.slice(0, 16) : '');

const Default = ({ mapValue, data, title, step = 1, color = "#0880DF" }) => {
  const info = mapValue.map((item: any) => {
    return {
      name: `${item.name}：`,
      value: data[item.key]
    }
  });

  const Info = () => <ListCard data={info} type="small" step={2} />
  return <Step color={color} title={title} step={step} ChildComponent={Info} />;
}

const ReciveRisk = ({ data, step = 1, color = "#0880DF" }) => {
  const { records = [], questions = [] } = data;

  const STask = ({ data }) => {
    const Info = DividerItem({
      WrapperComponent: () => <>
        <Row>
          <Col style={{ padding: '10px 20px 0 20px' }}>
            隐患描述：{`${Array.isArray(data.tags) ? data.tags.join('; ') : ''}`}
          </Col>
        </Row>
        <Row>
          <Col span={19}>
            {
              Array.isArray(data.images) && data.images.map((v, ind) => (
                <Imgviewer key={ind} url={v} isThumb={true} thumbWidth="100px" thumbHeight="80px" margin='10px' />
              ))
            }
          </Col>
        </Row>
        <Row style={{ borderTop: '1px solid #DEE1E7', padding: '15px 20px' }}>
          <Col span={12}>
            <Icon type="logout"
              style={{ display: 'line-block', marginRight: '5px', fontSize: '18px', color: '#0880DF' }}
            />隐患来源：消防巡检
          </Col>
          <Col span={12}>
            <Icon type="logout"
              style={{ display: 'line-block', marginRight: '5px', fontSize: '18px', color: '#0880DF' }}
            />发现时间：{sliceTime(questions.createTime)}
          </Col>
        </Row>
      </>,
      title: data.name, type: 'none', bordered: true, radius: 0
    });

    return <Info />
  }

  const SRecord = ({ data }) => {
    const Info = DividerItem({
      WrapperComponent: () => <>
        <Row>
          <Col style={{ padding: '10px 20px 0 20px' }}>{data.cause}</Col>
        </Row>
        <Row>
          <Col span={19}>
            {
              Array.isArray(data.images) && data.images.map((v, ind) => (
                <Imgviewer key={ind} url={v} isThumb={true} thumbWidth="100px" thumbHeight="80px" margin='10px' />
              ))
            }
          </Col>
        </Row>
        <Row style={{ borderTop: '1px solid #DEE1E7', padding: '15px 20px' }}>
          <Col span={12}>
            <Icon type="logout"
              style={{ display: 'line-block', marginRight: '5px', fontSize: '18px', color: '#0880DF' }}
            />隐患来源：{data.originTypeName}
          </Col>
          <Col span={12}>
            <Icon type="logout"
              style={{ display: 'line-block', marginRight: '5px', fontSize: '18px', color: '#0880DF' }}
            />发现时间：{sliceTime(data.createTime)}
          </Col>
        </Row>

      </>,
      title: '隐患描述', type: 'none', bordered: true, radius: 0
    });

    return <Info />
  }

  const Task = () => <>
    {Array.isArray(questions) && questions.map(v => (
      <STask data={v} key={v.id} />
    ))}
  </>

  const Record = () => <>
    {Array.isArray(records) && records.map(v => (
      <section style={{ margin: '10px 0 15px 0' }} key={v.id}><SRecord data={v}/></section>
    ))}
  </>;

  const info = [
    { name: '设备设施名称：', value: data.name },
    { name: '设备设施位置：', value: `${data.buildName || ''}${data.floorName || ''}${data.areaName || ''}` },
  ]

  return <Step
    color={color}
    title={`${data.stateName} ${sliceTime(data.time)}`}
    step={step}
    ChildComponent={() => (
      <>
        <ListCard data={info} type="small" step={2} />
        <section style={{ margin: '0px 0 15px 0' }}><Task /></section>
        <Record />
      </>
    )}
  />
}

const DispatchRisk = ({ data, step }) => (
  <Default mapValue={DETAILS_RIST_2} title={`${data.stateName} ${sliceTime(data.time)}`} data={data} step={step} />
)

const CheckRisk = ({ data, step }) => (
  <Default mapValue={DETAILS_RIST_4} title={`${data.stateName} ${sliceTime(data.time)}`} data={data} step={step} />
)

const TodoRisk = ({ data, step, color }) => {
  return <Default mapValue={DETAILS_RIST_8} color={color} title={`${data.stateName} ${sliceTime(data.time)}`} data={data} step={step} />
}

const HandleRisk = ({ data, step, color = "#0880DF" }) => {
  const RendCard = ({ data }) => {
    const info = DETAILS_RIST_3.map((item: any) => {
      return {
        name: `${item.name}：`,
        value: data[item.key]
      }
    });

    const Info = () => <>
      <ListCard data={info} type="small" step={2} />
      <Row>
        <ListCardItem types="small" style={{ width: '155px' }} span={4}>处理照片：</ListCardItem>
        <Col span={19}>
          {
            Array.isArray(data.images) && data.images.map((v, ind) => (
              <Imgviewer key={ind} url={v} isThumb={true} thumbWidth="100px" thumbHeight="80px" margin='10px' />
            ))
          }
        </Col>
      </Row>
    </>;

    return <Info />;
  }

  const Info = () => (
    <>{Array.isArray(data) && data.map((v, ind) => <RendCard data={v} key={ind} />)}</>
  )
  return (
    <Step
      color={color}
      title={`处理隐患  ${Array.isArray(data) && data[0] ? sliceTime(data[0].time) : ''}`}
      step={step}
      ChildComponent={Info}
    />
  )
}

const Item = (props) => {
  const state = props.data ? props.data.state : -1;

  return (
    <>
      {(() => {
        switch (state) {
          case 1:  // 接收隐患
            return <ReciveRisk {...props} />
          case 2:  // 分配隐患
            return <DispatchRisk {...props} />
          case 4: 
            return <CheckRisk {...props} />
          case 8: 
            return <TodoRisk {...props}/>
          case 16:
            return <TodoRisk {...props}/>
          case 32:
            return <Step
              color={getColor(32)}
              title={props.data.stateName}
              step={'✔'}
            />
          default:
            return Array.isArray(props.data) && props.data[0] && props.data[0].state === 3
              ? <HandleRisk {...props} />
              : null
        }
      })()}
    </>
  )
}

class Details extends Component<P> {
  render() {

    const { data } = this.props;
    const { level } = data;
    const last = level.pop();

    return (
      <div>
        { Array.isArray(level) && level.map((v, ind) => <Item data={data[v]} key={v} step={ind + 1} />)}
        {
          <Item data={data[last]} color={getColor(data[last] ? data[last].state : -1)} step={Array.isArray(level) ? level.length + 1 : 1} />
        }
      </div>
    )
  }
}

export default Details;